<template>
	<view class="u-page fullpage" :style="skin">
		<view class="top-warp">
			<zx-nav title="优惠券"></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :top="topH" @down="downCallback" @up="upCallback">
			<view class="list"><coupon :info="item" v-for="(item, index) in list" :key="index"></coupon></view>
		</mescroll-body>
	</view>
</template>

<script>
import coupon from '@/components/coupon';
import AppTabs from '@/components/app-tabs.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			tabIndex: 0,
			tabs: ['未使用', '已使用', '已失效'],
			list: []
		};
	},
	mixins: [MescrollMixin],
	components: { coupon, AppTabs },
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(100) + uni.upx2px(20) + 'px';
		}
	},
	methods: {
		tabChange(e) {
			this.mescroll.resetUpScroll();
		},
		upCallback(mescroll) {
			this.getCouponList();
		},
		getCouponList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				status: this.tabIndex + 1
			};
			this.$postAction(this.$api.getMyCouponList, param)
				.then(da => {
					if (da.data && da.data.length > 0) {
						let curPageData = da.data;
						this.mescroll.endBySize(curPageData.length, da.count);
						if (this.mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(curPageData); //追加新数据
					} else {
						if (this.mescroll.num == 1) this.list = [];
						this.mescroll.endSuccess(da.count || 0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style>
.list {
	padding: 0 28upx;
}
</style>
<style lang="scss">
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
}
</style>
